<template>
	<div class="container">
	
	<div>
	<div>
		 <el-form :inline="true" class="demo-form-inline">
		    <el-form-item>
		      <el-input v-model="form.vipName" placeholder="会员姓名" />
		    </el-form-item>
		    <el-form-item>
				<el-input v-model="form.courseName" placeholder="团课名称" />
		    </el-form-item>
		    <el-form-item>
		      <el-button type="primary" @click="QueryList" class="inquire" :icon="Search">查询</el-button>
		    </el-form-item>
		  </el-form>
	</div>
	
  <el-table :data="tableData" border style="width: 100%">
   
    <el-table-column prop="createTime" label="评价时间" width="250" />
    <el-table-column prop="courseTime" label="课时" width="300" />
    <el-table-column prop="pic" label="会员" width="150" />
	<el-table-column prop="evaluationTime" label="教练" width="150" />
	<el-table-column prop="experience" label="训练感受" width="250" />
	<el-table-column prop="evaluation" label="教练服务" width="140" />
	<el-table-column prop="service" label="评价内容" width="150"/>
    <el-table-column prop="updateTime" label="评价等级" width="100" />
	<el-table-column prop="status" label="是否显示" width="150">
							<template #default="s">
								<el-tag type="danger" v-if="s.row.status == 0">显示</el-tag>
								<el-tag type="success" v-else>不显示</el-tag>
							</template>
						</el-table-column>

  </el-table>
  
  </div>
  <div class="fenye">
              <el-pagination class="fenye" background layout="prev, pager, next" :total="100" :page-size="5">
              </el-pagination>
          </div>
  </div>
</template>

<script lang="ts" setup>
import {Search } from '@element-plus/icons-vue';//icon图标
import {ref,reactive} from "vue"
import Evaluates from "../store/EvaluateStore"//引入EvaluateStore
import { EvaluateHooks, Evaluate } from "../hooks/EvaluateHooks"//解析hooks内的方法
const _EvaluateHooks:Evaluate=EvaluateHooks()
 _EvaluateHooks.EvaluateList(Evaluate)//执行hooks内EvaluateList()
const tableData = ref<Array<any>>([])//声明变量
function Evaluate(data:any){
	tableData.value=data//吧store内的数据赋给tableData
}


const form=reactive({
	courseName:"",
	limit:10,
	page:1,
	vipName:""
})
function QueryList(){
	_EvaluateHooks.EvaluationQuery(form.courseName,form.limit,form.page,form.vipName,Evaluate)
}
</script>
<style type="text/css" scoped>
	
	.tab{
		margin-bottom: 20px;
	}
	>>>th div{
		text-align: center;
	}
	>>>td div{
		text-align: center;
	}
	.fenye{
       margin-top: 10px;
        display: flex;
        justify-content: flex-end;
	}
	.tk{
		   width: 150px;
		   height: 40px;
		   margin: 20px 10px 20px 20px;

	}
	.inquire{
		width: 100px;
		height: 35px;
	}
</style>